<template>
  <div id="app">
    <!--头部-->
    <x-header :left-options="{showBack: false}" style="background-color: dodgerblue">信息管理系统</x-header>
    <router-view></router-view>

    <!--底部-->
    <tabbar>
      <tabbar-item link="/">
        <img slot="icon" src="/static/image/首页.png">
        <span slot="label">首页</span>
      </tabbar-item>
      <tabbar-item show-dot link="/m2">
        <img slot="icon" src="/static/image/会员.png">
        <span slot="label">会员</span>
      </tabbar-item>
      <tabbar-item selected link="/m3" badge="2">
        <img slot="icon" src="/static/image/购物车.png">
        <span slot="label">购物车</span>
      </tabbar-item>
      <tabbar-item link="/m4">
        <img slot="icon" src="/static/image/搜索.png">
        <span slot="label">查找</span>
      </tabbar-item>
    </tabbar>
  </div>

</template>

<script>
  import {Tabbar, TabbarItem, XHeader} from 'vux';

  export default {
    name: 'app',
    components: {
      Tabbar,
      TabbarItem,
      XHeader
    }
  }
  ;
</script>

<style lang="less">
  @import '~vux/src/styles/reset.less';

  body {
    background-color: #fbf9fe;
  }
</style>
